<template>
	<div class="navbar">
		<div class="left-side">
			<a-space>
				<img alt="logo" src="@/assets/images/logo.png" />
				<icon-menu-fold v-if="!keepDesktop && !topMenu && appStore.device === 'mobile'" style="font-size: 22px; cursor: pointer" @click="toggleDrawerMenu" />
			</a-space>
		</div>
		<div class="center-side">
			<Menu v-if="topMenu" />
		</div>
		<ul class="right-side">
			<!--<li>
				<a-tooltip :content="
            theme === 'light'
              ? $t('settings.navbar.theme.toDark')
              : $t('settings.navbar.theme.toLight')
          ">
					<a-button class="nav-btn" type="outline" :shape="'circle'" @click="handleToggleTheme">
						<template #icon>
							<icon-moon-fill v-if="theme === 'dark'" />
							<icon-sun-fill v-else />
						</template>
					</a-button>
				</a-tooltip>
			</li>-->
			<li>
				<a-tooltip :content="
            isFullscreen
              ? $t('settings.navbar.screen.toExit')
              : $t('settings.navbar.screen.toFull')
          ">
					<a-button class="nav-btn" type="outline" :shape="'circle'" @click="toggleFullScreen">
						<template #icon>
							<icon-fullscreen-exit v-if="isFullscreen" />
							<icon-fullscreen v-else />
						</template>
					</a-button>
				</a-tooltip>
			</li>
			<li>
				<a-dropdown trigger="click">
					<div :style="{  cursor: 'pointer' }">
						<a-avatar :size="32" :style="{ marginRight: '8px'}">
							<img alt="avatar" :src="avatar" v-if="userStore.avatar" />
							<img alt="avatar" src="@/assets/images/1.png" v-else/>
						</a-avatar>
						{{userStore.nickname}}
					</div>
					<template #content>
						<a-doption>
							<a-space @click="handleLogout">
								<icon-export />
								<span>
                  {{ $t('messageBox.logout') }}
                </span>
							</a-space>
						</a-doption>
					</template>
				</a-dropdown>
			</li>
		</ul>
	</div>
</template>

<script lang="ts" setup>
	import { computed, ref, inject } from 'vue';
	import { Message } from '@arco-design/web-vue';
	import { useDark, useToggle, useFullscreen } from '@vueuse/core';
	import { useAppStore, useUserStore } from '@/store';
	import { LOCALE_OPTIONS } from '@/locale';
	import useLocale from '@/hooks/locale';
	import useUser from '@/hooks/user';
	import Menu from '@/components/menu/index.vue';

	const appStore = useAppStore();
	const userStore = useUserStore();
	const {
		logout
	} = useUser();
	const {
		changeLocale,
		currentLocale
	} = useLocale();
	const {
		isFullscreen,
		toggle: toggleFullScreen
	} = useFullscreen();
	const locales = [...LOCALE_OPTIONS];
	const theme = computed(() => {
		return appStore.theme;
	});
	const topMenu = computed(() => appStore.topMenu && appStore.menu);
	const keepDesktop = computed(() => appStore.keepDesktop);
	const isDark = useDark({
		selector: 'body',
		attribute: 'arco-theme',
		valueDark: 'dark',
		valueLight: 'light',
		storageKey: 'arco-theme',
		onChanged(dark: boolean) {
			// overridden default behavior
			appStore.toggleTheme(dark);
		},
	});
	const toggleTheme = useToggle(isDark);
	const handleToggleTheme = () => {
		toggleTheme();
	};
	const setVisible = () => {
		appStore.updateSettings({
			globalSettings: true
		});
	};
	const refBtn = ref();
	const triggerBtn = ref();
	const setPopoverVisible = () => {
		const event = new MouseEvent('click', {
			view: window,
			bubbles: true,
			cancelable: true,
		});
		refBtn.value.dispatchEvent(event);
	};
	const handleLogout = () => {
		logout();
	};
	const setDropDownVisible = () => {
		const event = new MouseEvent('click', {
			view: window,
			bubbles: true,
			cancelable: true,
		});
		triggerBtn.value.dispatchEvent(event);
	};
	const switchRoles = async() => {
		const res = await userStore.switchRoles();
		Message.success(res as string);
	};
	const toggleDrawerMenu = inject('toggleDrawerMenu') as() => void;
</script>

<style scoped lang="less">
	.navbar {
		display: flex;
		justify-content: space-between;
		height: 100%;
		background-color: var(--color-bg-2);
		border-bottom: 1px solid var(--color-border);
	}
	
	.left-side {
		display: flex;
		align-items: center;
		padding-left: 20px;
	}
	
	.center-side {
		flex: 1;
	}
	
	.right-side {
		display: flex;
		padding-right: 20px;
		list-style: none;
		 :deep(.locale-select) {
			border-radius: 20px;
		}
		li {
			display: flex;
			align-items: center;
			padding: 0 10px;
		}
		a {
			color: var(--color-text-1);
			text-decoration: none;
		}
		.nav-btn {
			border-color: rgb(var(--gray-2));
			color: rgb(var(--gray-8));
			font-size: 16px;
		}
		.trigger-btn,
		.ref-btn {
			position: absolute;
			bottom: 14px;
		}
		.trigger-btn {
			margin-left: 14px;
		}
	}
</style>

<style lang="less">
	.message-popover {
		.arco-popover-content {
			margin-top: 0;
		}
	}
</style>